// @ts-nocheck
import {useState, useEffect} from 'react'

import {Modal, Form, Input, message, Row, Col, Select, Upload} from 'antd'
import {modifyRole, queryRole} from '@/services/role'
import {createUser,modifyUser} from '@/services/user'
import {PlusOutlined} from '@ant-design/icons'
import imgzip from 'imgzip';


const Index = (props) => {
  const [form] = Form.useForm()
  const {visible, onClose, onOk, mode, data} = props
  const [roles, setRole] = useState([])
  const [files, setFiles] = useState([])
  useEffect(() => {
      if (visible) {
        if (mode === 'modify') {
          form.setFieldsValue({
            user_name: data.user_name,
            real_name: data.real_name,
            telephone: data.telephone,
            email: data.email,
            role: data.role.split(','),
          })
        }
        queryRole({}).then(res => {
          setRole(res.data)
        })
      }
    }
    ,
    [visible]
  )
  const handleOk = () => {

    form.validateFields().then(values => {

      const body = {
        user_name: values.user_name,
        real_name: values.real_name,
        telephone: values.telephone,
        email: values.email,
        role: values.role.join(',')
      }
      if (values.avatar) {
        const compress = new imgzip({quality: 0.5});
        compress.photoCompress(values.avatar.file.originFileObj, base64 => {
          if (mode === 'create') {
            createUser({...body, avatar: base64}).then(res => {
              if (res.status === 200) {
                message.success(res.message).then()
                onOk()
              } else {
                message.error('新建失败！').then()
              }
            })
          } else {
            modifyUser({...body, avatar: base64, user_id:data.user_id}).then(res => {
              if (res.status === 200) {
                message.success(res.message).then()
                onOk()
              } else {
                message.error('修改失败！').then()
              }
            })
          }
        });
      } else {
        if (mode === 'create') {
          createUser({...body}).then(res => {
            if (res.status === 200) {
              message.success(res.message).then()
              onOk()
            } else {
              message.error('新建失败！').then()
            }
          })
        } else {
          modifyUser({...body, user_id:data.user_id}).then(res => {
            if (res.status === 200) {
              message.success(res.message).then()
              onOk()
            } else {
              message.error('修改失败！').then()
            }
          })
        }
      }
      form.resetFields()

    })
  }
  return (
    <Modal
      title={mode === 'create' ? '新建用户' : '修改用户'}
      maskClosable={false}
      destroyOnClose
      width={'40vw'}
      visible={visible}
      onCancel={()=>{form.resetFields();onClose();}}
      onOk={handleOk}
    >
      <Form
        form={form}
        labelCol={{span: 6}}
        wrapperCol={{span: 14}}
        autoComplete="off"
      >
        <Row>
          <Col span={12}>
            <Form.Item
              label="用户名"
              name="user_name"
              rules={[{required: true, message: '请输入用户名！'}]}
            >
              <Input/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="真实姓名"
              name="real_name"
              rules={[{required: true, message: '请输入真实姓名！'}]}
            >
              <Input/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="手机号"
              name="telephone"
              rules={[{required: true, message: '请输入手机号！'}, {
                pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
                message: "请输入正确的手机号！"
              }]}
            >
              <Input/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="邮箱"
              name="email"
            >
              <Input/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="角色"
              name="role"
              rules={[{required: true, message: '请选择角色！'}]}
            >
              <Select
                mode="multiple"
                allowClear
                placeholder="请选择角色"
              >
                {roles.map(v => <Select.Option key={v.role_id} value={v.role_id.toString()}>{v.name}</Select.Option>)}
              </Select>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="头像"
              name="avatar"
            >
              <Upload
                listType="picture-card"
                onChange={({file,fileList}) => setFiles(fileList)}
              >
                {files.length >= 1 ? null : <div>
                  <PlusOutlined/>
                  <div style={{marginTop: 8}}>上传头像</div>
                </div>}
              </Upload>
            </Form.Item>
          </Col>
        </Row>

      </Form>
    </Modal>
  );
};

export default Index;
